<template>
    <div>
        <form>
            <table>
                <tbody>
                    <tr>
                        <td>账号:</td>
                        <td><input type="text" placeholder="请输入用户名" v-model="uAccount"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" v-model="uPassword"></td>
                    </tr>
                    <tr>
                        <td>手机号:</td>
                        <td><input type="text" style="position: relative;left: 7%;" v-model="uPhone"><input
                                type="button" value="点击发送" style="position: relative;left: 10%;"></td>
                    </tr>
                    <tr>
                        <td>验证码</td>
                        <td><input type="text" style="width: 17%;" v-model="uCode"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="button" value="注册" @click="btnRegister"></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
var router = useRouter()
let uAccount = ref('')
let uPassword = ref('')
let uPhone = ref('')
let uCode = ref('')

function btnRegister() {
    router.push('/')
    // if (uAccount.value == '') {
    //     alert('请输入用户名')
    // } else if (uPassword.value == '') {
    //     alert('请输入密码')
    // } else {
    //     let tmpObj = {
    //         uname: uAccount.value,
    //         upassword: uPassword.value
    //     }
    //     fetch('http://localhost:7070/user', {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json'
    //         }, body: JSON.stringify(tmpObj)
    //     }).then(res => {
    //         if (res.status == 444) {
    //             alert('该用户名以被注册')
    //         } else {
    //             alert('注册成功')
    //             router.push('/')
    //         }
    //     })
    // }
}
</script>
<style scoped>
div {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    width: 600px;
    text-align: center;
    border: 2px solid #ffffff;
    color: #ffffff;
    box-shadow: 2px 2px red;
    font-family: cursive;
    margin-top: 10%;
    line-height: 85px;
}

table input {
    background-color: #000c17;
    color: #ffffff;
    outline: none;
    border: none;
    border-bottom: 2px solid #ffffff;
}

table input[type=button] {
    text-align: center;
    width: 16%;
    font-size: 15px;
    font-family: serif;
    text-shadow: 2px 2px darkred;
    font-weight: 980;
    border: 1px solid #ffffff;
    border-radius: 3px;
}
</style>